<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-订单列表 开发者: 麦沃德科技-半夏 
+---------------------------------------------------------------------- -->

<template>
	<view class="component-order-list" :style="{'--theme-color': themeColor}">
		<view class="list-item" v-for="item in showData" :key="item.id" @click="toDetails(item.id, item.state)">
			<view class="item-head flex align-items-center">
				<view class="head-text">{{item.departure_time}}</view>
				<view class="head-label">
					<view class="label-box" :style="{'--label-color': themeColor}" v-if="item.state == 'pending'">
						<view class="background"></view>
						<text class="text">待接单</text>
					</view>
					<view class="label-box" :style="{'--label-color': themeColor}" v-else-if="item.state == 'accepted'">
						<view class="background"></view>
						<text class="text">已接单</text>
					</view>
					<view class="label-box" :style="{'--label-color': '#00A743'}" v-else-if="item.state == 'in_progress'">
						<view class="background"></view>
						<text class="text">行程中</text>
					</view>
					<view class="label-box" :style="{'--label-color': '#FFC330'}" v-else-if="item.state == 'awaiting_payment'">
						<view class="background"></view>
						<text class="text">待补差</text>
					</view>
					<view class="label-box" :style="{'--label-color': '#8D929C'}" v-else-if="item.state == 'completed' || item.state == 'refunded'">
						<view class="background"></view>
						<text class="text">已完成</text>
					</view>
					<view class="label-box" :style="{'--label-color': '#8D929C'}" v-else-if="item.state == 'cancelled'">
						<view class="background"></view>
						<text class="text">已取消</text>
					</view>
				</view>
				<view class="head-text flex-item" style="text-align: right;">{{item.actual_amount}}元</view>
			</view>
			<view class="item-address">
				<view class="address-column flex align-items-center">
					<view class="column-point" style="background: #242629;"></view>
					<view class="column-text flex-item">{{item.from_address}}</view>
				</view>
				<view class="address-column flex align-items-center">
					<view class="column-point" :style="{background: themeColor}"></view>
					<view class="column-text flex-item">{{item.to_address}}</view>
				</view>
			</view>
			<view class="item-foot flex justify-content-between align-items-center">
				<view class="foot-label" v-if="item.type == 1">
					<text>实时订单</text>
					<text v-if="item.dispatch_mode == 1">/在线抢单</text>
					<text v-else-if="item.dispatch_mode == 2">/扫码报单</text>
					<text v-else-if="item.dispatch_mode == 3">/手机号报单</text>
				</view>
				<view class="foot-label" v-else>
					<text>预约订单</text>
					<text v-if="item.dispatch_mode == 1">/在线抢单</text>
					<text v-else-if="item.dispatch_mode == 2">/扫码报单</text>
					<text v-else-if="item.dispatch_mode == 3">/手机号报单</text>
				</view>
				<view class="foot-btn">
					<view class="btn" v-if="item.state == 'pending'" @click.stop="handleGrabOrder(item.id)">立即抢单</view>
					<view class="btn" v-if="item.state == 'accepted'" @click.stop="handleCancel(item.id)">取消订单</view>
					<view class="btn" v-if="item.state == 'awaiting_payment' && showStatus == 1" @click.stop="openPaymentCode(item.id)">补差二维码</view>
				</view>
			</view>
			<view class="item-mask" v-if="loading">
				<view class="mask-top">
					<view class="top-left"></view>
					<view class="top-right"></view>
				</view>
				<view class="mask-center">
					<view class="center-item"></view>
					<view class="center-item"></view>
				</view>
				<view class="mask-bottom">
					<view class="bottom-left"></view>
					<view class="bottom-right"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		name: "componentOrderList",
		props: ["showData", "showStatus", "loading"],
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
		methods: {
			// 跳转详情
			toDetails(id, state) {
				this.$util.toPage({
					mode: 1,
					path: `/pages/driver/order/details?id=${id}&state=${state}`,
					isToken: true,
				})
			},
			// 抢单
			handleGrabOrder(id) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.$util.request("driver.order.grabOrder", {
					id: id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.showToast({
							icon: "success",
							title: "接单成功",
							mask: true
						})
						setTimeout(() => {
							this.toDetails(id, "accepted")
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.error('抢单 ', error)
				})
			},
			// 取消订单
			handleCancel(id) {
				uni.showModal({
					title: "系统提示",
					content: "确定取消该订单吗？",
					confirmColor: this.themeColor,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: "加载中",
								mask: true,
							})
							this.$util.request("driver.order.cancel", {
								id: id
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									uni.showToast({
										icon: "success",
										title: "取消成功"
									})
									this.$emit("getOrderList")
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(error => {
								uni.hideLoading()
								console.error('抢单 ', error)
							})
						}
					}
				})
			},
			// 打开补差二维码
			openPaymentCode(id) {
				this.$emit("openCode", id)
			},
		}
	}
</script>

<style lang="scss">
	.component-order-list {
		.list-item {
			position: relative;
			border-radius: 32rpx;
			background: #FFF;
			padding: 32rpx;
			margin-top: 32rpx;

			&:first-child {
				margin-top: 0;
			}

			.item-head {
				.head-text {
					color: #242629;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
				}

				.head-label {
					margin-left: 16rpx;

					.label-box {
						position: relative;
						z-index: 1;
						padding: 0 4rpx;
						border-radius: 8rpx;
						overflow: hidden;
						height: 40rpx;
						line-height: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.background {
							background: var(--label-color);
							opacity: .1;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							z-index: -1;
						}

						.text {
							color: var(--label-color);
							text-align: center;
							font-size: 24rpx;
							font-weight: 600;
						}
					}
				}
			}

			.item-address {
				margin-top: 32rpx;

				.address-column {
					margin-top: 16rpx;

					&:first-child {
						margin-top: 0;
					}

					.column-point {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
					}

					.column-text {
						margin-left: 16rpx;
						color: #242629;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
					}
				}
			}

			.item-foot {
				margin-top: 16rpx;

				.foot-label {
					color: #FFF;
					font-size: 24rpx;
					font-weight: 600;
					padding: 0 12rpx;
					border-radius: 16rpx;
					background: #353C57;
					height: 48rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.foot-btn {
					.btn {
						color: var(--theme-color);
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
						border-radius: 24rpx;
						border: 1px solid var(--theme-color);
						height: 48rpx;
						padding: 0 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 16rpx;
					}
				}
			}

			.item-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 5;
				background: #FFF;
				display: flex;
				flex-direction: column;
				padding: 32rpx;

				.mask-top {
					display: flex;
					justify-content: space-between;

					.top-left {
						width: 68%;
						height: 40rpx;
						background: #eee;
					}

					.top-right {
						width: 28%;
						height: 40rpx;
						background: #eee;
					}
				}

				.mask-center {
					margin-top: 32rpx;
					display: flex;
					flex-direction: column;
					row-gap: 16rpx;

					.center-item {
						width: 100%;
						height: 34rpx;
						background: #eee;
					}
				}

				.mask-bottom {
					display: flex;
					justify-content: space-between;
					margin-top: 16rpx;

					.bottom-left {
						width: 32%;
						height: 48rpx;
						background: #eee;
					}

					.bottom-right {
						width: 32%;
						height: 48rpx;
						background: #eee;
					}
				}
			}
		}
	}
</style>